<script>
import dom from '@/utils/dom.js'
import mixin from './mixin'
export default {
    name:'RsMenu',
    mixins:[mixin],
    provide() {
        return {
            rootMenu: this
        };
    },
    props:{
        minWidth:{
            type:Number,
            default:200
        },
        contextMenu:{
            type:Boolean,
            default:false
        },
        zIndex:{
            type:Number,
            default:1024
        },
        alignType:{
            type:String,
            default:'left'
        },
        bkColor:{
            type:String,
            default:"#ffffff"
        }
    },
    data(){
        return {
            items:[],
            submenus:[],
            //active:false,
            visible:false,
            cnt:0,
            mouseMoveHandler:null,
            timeoutHandler:null,
            openType:''
        }
    },
    methods:{
        addSubmenu(item) {
            this.$set(this.submenus, this.submenus.length, item);
        },
        addMenuItem(item) {
            this.$set(this.items, this.items.length, item);
        },
        closeMenu(){

            function _close(menus){

                menus.forEach(item=>{
                    item.visible = false;
                    if( item.submenus.length > 0 ){
                        _close(item.submenus);
                    }
                });
            }
            //console.log('closeMenu')
            this.openType = '';
            _close(this.submenus)
            if( this.contextMenu ){
                this.visible = false;
            }
        },
        show(left,top){

            if(this.contextMenu){

                dom.setStyle(this.$refs.menu,'display','block');
                const menuRect = dom.getBoundingClientRect(this.$refs.menu);
                const bodyRect = dom.getBoundingClientRect(document.body);
                let x = bodyRect.width - left - menuRect.width;
                if( x > 0 ){
                    this.left = left;
                }else{
                    this.openType = "left";
                    this.left = left + x;
                }

                this.top = top;
                this.visible = true;
                const that = this;
                this.mouseMoveHandler = function(ev){
                    //that.onMouseMove(ev);
                    dom.off(document.body,'mousemove',that.mouseMoveHandler)
                    setTimeout(()=>{

                        if( that.cnt == 0 ){
                            that.closeMenu();
                        }
                    },300)
                }
                dom.on(document.body,'mousemove',that.mouseMoveHandler)
            }
        }
    },
    computed:{
        menuStyle(){
            const obj = {
                //background:this.bkColor
            }
            if(this.contextMenu){
                obj.left = `${this.left}px`;
                obj.top = `${this.top}px`;
                obj.display = this.visible?'block':'none';
                obj.zIndex=this.zIndex;
                obj.minWidth = `${this.minWidth}px`;
                obj.visibility = this.visible?'visible':'hidden'
            }
            return obj
        }
    },
    mounted(){
        //console.log('rsmenu')
        if(this.contextMenu){
            document.body.appendChild(this.$el);
        }
    },
    render(){
        //console.log(this.style)
        const cls = {
            "rs-menubar":this.contextMenu==false,
            "rs-contextmenu":this.contextMenu,
            "align-right":this.contextMenu==false && this.alignType === "right"
        };
        return (
            <div class={cls} style={[this.menuStyle]} ref="menu">
                <div class="rs-menu" 
                    on-mouseenter={(ev)=>{this.onEnterMenu(ev,this)}}
                    on-mouseleave={(ev)=>{this.onLeaveMenu(ev,this)}}>
                        {this.$slots.default}
                </div>
            </div>
        )
    }
}
</script>